<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 66px;
                border-bottom: 1px solid #000;
                width: 1212px;
                margin: 0px auto;
            }
            .float_lift{
                float: left;
            }
            .float_right{
                float: right;
            }
            .header img{
                float: left;
                margin-top: 20px;
                margin-left: 50px;
                margin-bottom: 30px;
                margin-right: 200px;
            }
            .header li{
                margin: 20px 20px;

                float: left;
                width: 30px;
                height: 30px;
                font-size: 20px;
                background-color: rgb(255, 239, 19);
                transform: rotate(-24deg);
                
                text-align: center;
                border-radius: 100% ;
            }
            .header li:hover{
                transform: rotate(-360deg);
                transition: 2s;
            }
            .header p{
                float: right;
                margin: 25px 20px;
                color: rgb(34, 32, 32);
                font-size: 16px;
                
            }
            .sond{
                background: url("images/11.png");
                float: right;
                margin: 20px 0px;

                width: 27px;
                height: 27px;
            }
            
            .banner{
                width: 1212px;
                height: 512px;
                margin:25px auto
            }
            .list{
                width: 1212px;
                height: 36px;
                margin:0px auto;
            }
            .list li{
                padding-left: 3px;
                padding-top: 3px;
                float: left;
                border: 1px solid black;
                text-align:left;
                width: 100px;
                height: 30px;
                margin-right: 10px;
            }
            .con{
                width: 1212px;
                height: 900px;
                margin:25px auto;
            }
            .con li{
                width: 250px;
                height: 250px;
                float: left;
                margin: 26px;

            }
            .con img{
                height: 167px;
            }
            .more{
                width: 1200px;
                height: 38px;
                background:rgb(138, 129, 129);
                margin:0px auto;
                text-align: center;
                line-height: 38px;
            }
            .banner img{
                float: left;
            }
            .con p{
                color: #333;
                font-size: 14px;
                line-height: 24px;
                height: 48px;
            }
            .con b{
                float: left;
                color: #ccc;
                font-size: 10px;
                font-weight: 100;
            }
            .con nos{
                float: right;
                color: #ccc;
                font-size: 10px;
                font-weight: 100;
                margin-right: 10px;
            }
            .con df{
                color: #ccc;
                font-size: 10px;
                font-weight: 100;
                float: right;
                margin-right: 50px;
            }
            .orve{
                height: 250px;
                width: 1100px;
                margin: 0px auto;
            }
            .orve p{
                font-weight: 50;
                
                text-align: center;
                margin: auto;
                padding-top: 20px;

            }
            .orve img{
                float: left;
                margin: 0 10px ;
            }
            .orve .pd{
                height: 50px;
                width: 100px;
            }
            .lps{
                height: 50px;
                width: 1000px;
                margin: 0px auto;
            }
            .lps p{
                color: #999;
                font-size: 10px;
            }
        </style>
    </head>
    <body>
            <div class="header">
                <img src="images/1191319.png" alt="">
                <ul>
                    <li>赞</li>
                    <li>萌</li>
                    <li>哈</li>
                    <li>艹</li>
                    <li>买</li>
                </ul>
                <p>登录</p>
                <div class="sond">
    
                </div>
            </div>
            <div class="banner">
                <img src="images/13262509030113855.jpg" height="512px">
                <img src="images/13262509279636925.jpg" height="167px" style="margin-left: 13px;">
                <img src="images/13262509279636925.jpg" height="167px" style="margin: 5px 0; margin-left: 13px;">
                <img src="images/13262509279636925.jpg" height="167px" style="margin-left: 13px;">
                
            </div>
            <ul class="list">
                <li> 最新</li>
                <li> 最热</li>
                <li> 热议</li>
                <li> 随机</li>
            </ul>
            <ul class="con">
                <li>
                    <img src="images/13262509068968153.jpg" alt="">
                    <p>用水才能擦去笔记，他只想保护好设计师的创意</p>
                    <b>2小时前</b>
                    <nos>1</nos>
                    <df>122</df>
                </li>
                <li>
                    <img src="images/13262509061213031.jpg" alt="">
                    <p>马桶刷也要有优雅的姿态</p>
                    <b>3小时前</b>
                    <nos>7</nos>
                    <df>108</df>
                </li>
                <li>
                    <img src="images/13262509254420907.jpg" alt="">
                    <p>健身也走[科技范],你以为仅仅只是个瑜伽垫？</p>
                    <b>16小时前</b>
                    <nos>11</nos>
                    <df>407</df>
                </li>
                <li>
                    <img src="images/13262509051686774.jpg" alt="">
                    <p>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]吧</p>
                    <b>16小时前</b>
                    <nos>16</nos>
                    <df>640</df>
                </li>
                <li>
                    <img src="images/13262508991084230.jpg" alt="">
                    <p>矮怎么了？照样能够拿到暑假顶端的书</p>
                    <b>18小时前</b>
                    <nos>534</nos>
                    <df>24</df>
                </li>
                <li>
                    <img src="images/13262509241383402.png" alt="">
                    <p>中国设计节PK世界工业设计大会，哪个更棒？</p>
                    <b>20小时前</b>
                    <nos>10</nos>
                    <df>402</df>
                </li>
                <li>
                    <img src="images/13262509039459954.png" alt="">
                    <p>首届世界工业设计大会开在家门口杭州，中国设计师躁起来</p>
                    <b>23小时前</b>
                    <nos>9</nos>
                    <df>303</df>
                </li>
                <li>
                    <img src="images/13262509254420907.jpg" alt="">
                    <p>窝在被窝里，你应该需要这样一个散热阈门？</p>
                    <b>1天前</b>
                    <nos>11</nos>
                    <df>479</df>
                </li>
                <li>
                    <img src="images/13262509297408237.jpg" alt="">
                    <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                    <b>2天前</b>
                    <nos>34</nos>
                    <df>533</df>
                </li>
                <li>
                    <img src="images/13262509134959167.jpg" alt="">
                    <p>琦靠在毯子上，这件事听着就让人舒坦</p>
                    <b>2天前</b>
                    <nos>19</nos>
                    <df>463</df>
                </li>
                <li>
                    <img src="images/13262509288848179.jpg" alt="">
                    <p>用水才能擦去笔记，</p>
                    <b>2小时前</b>
                    <nos>23</nos>
                    <df>23</df>
                </li>
                <li>
                    <img src="images/13262509231475310.jpg" alt="">
                    <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就变</p>
                    <b>2天前</b>
                    <nos>23</nos>
                    <df>23</df>
                </li>
                
            </ul>
            <p class="more">太快了吧，慢慢来</p>
            <div class="orve">
                <div class="pd">
                    <p>合作伙伴</p>
                </div>
                
                <img src="images/13262509125725063.png" alt="">
                <img src="images/13262509214120549.png" alt="">
                <img src="images/13262509145621943.png" alt="">
                <img src="images/13262509102643028.png" alt="">
                <img src="images/13262509020118676.png" alt="">
                <img src="images/13262509268361072.jpg" alt="">
                <div class="pd">
                    <p>友情链接</p>
                </div>
                

            </div>
            <div class="lps">
                <p>DRC北京工业设计创意产业基地 | 中国工业设计协会 | 设计邦 | 网易家居 | 智东西 | 壹网空间 | 七牛云存蓄 | 高清图片 | Fotor</p>
            </div>
        </div>
        
    </body>
</html>
